<template>
  <a-card style="display: flex; justify-content: center">
    <a-form :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
      <a-form-item
        :disabled="true"
        field="username"
        label="用户名"
      >
        <a-input v-model="form.username" />
      </a-form-item>
      <a-form-item field="name" label="原密码">
        <a-input v-model="form.originPwd" placeholder="请输入原密码" />
      </a-form-item>
      <a-form-item label="新密码">
        <a-input v-model="form.newPwd" placeholder="请输入新密码" />
      </a-form-item>
      <a-form-item label="确认新密码">
        <a-input v-model="form.confirmNewPwd" placeholder="请输入确认新密码" />
      </a-form-item>
      <a-form-item>
        <a-button html-type="submit">确认修改</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
  import { reactive } from 'vue';

  export default {
    setup() {
      const form = reactive({
        username: 'Wetcland',
        originPwd: '',
        newPwd: '',
        confirmNewPwd: '',
      });
      const handleSubmit = (data) => {
        console.log(data);
      };

      return {
        form,
        handleSubmit,
      };
    },
  };
</script>
